<!--
  默认选中数据
  selected:{
    id:string,
    plateNumber:string
  }
-->
<template>
  <Select ref="elm" placeholder="请输入车牌号码" :value="model" :disabled="disabled" @on-change="change" filterable remote :multiple="isMultiple" :transfer="transfer" :label-in-value="labelInValue" :clearable="!isMultiple" :remote-method="searchVehicles" :loading="searchLoading" @on-query-change="queryChange">
    <Option v-for="(option, index) in vehicleOptions" :value="option[valueKey||'id']" :key="`vehicle-complete-option-${option.id}`">{{option.plateNumber}}</Option>
  </Select>
</template>

<script>
  import {post}  from '@/util/request'

  export default {
    props: ['value','selected','multiple','labelInValue','disabled','valueKey','transfer'],
    mounted(){
      this.setSelected();
    },
    data() {
      return {
        model: this.value,
        vehicleOptions: [],
        searchLoading: false
      }
    },
    watch: {
      value(v){
        this.model = v;
      },
      selected(v){
        this.setSelected();
      }
    },
    computed:{
      isMultiple(){
        return this.multiple || this.multiple === undefined;
      }
    },
    methods:{
      change(v){
        if(!this.vehicleOptions.length && this.selected){
          let s = this.selected[this.valueKey||'id'];
          if(this.labelInValue){
            s = {
              id:this.selected.id,
              plateNumber:this.selected.plateNumber
            }
          }
          this.$emit("input", s);
          this.$emit("on-change", s);
        }else{
          this.$emit("input", v);
          this.$emit("on-change", v);
        }
      },
      searchVehicles(query){
        if(!this.isMultiple && this.selected){
          if (query === this.selected.plateNumber){
            return;
          }
        }
        if(query && query !== '' && query.length > 0) {
          this.searchLoading = true;
          let data = {
            key: query
          };
          post('/common/findVehicleByOrgId', data).then(json => {
            this.searchLoading = false;
            if (json.data.sta === 200) {
              this.vehicleOptions = json.data.data.map(item => {
                return {
                  id: item.id,
                  plateNumber: item.plateNumber
                };
              });
            }
          });
        }
      },
      setSelected(){
        if (this.selected){
          this.searchLoading = true;
          setTimeout(() => {
            this.vehicleOptions = [{id:this.selected.id,plateNumber:this.selected.plateNumber}];
            this.searchLoading = false;

            setTimeout(() => {
              if (this.isMultiple){
                this.model = [this.selected[this.valueKey||'id']];
              }else{
                this.model = this.selected[this.valueKey||'id'];
                this.$refs.elm.setQuery(this.selected.plateNumber);
              }
            },0);
          },0)
        }
      },
      queryChange(v){
        if (this.selected){
          if (!v){
            this.$refs.elm.setQuery(this.selected.plateNumber);
          }
        }
      }
    }
  }
</script>
